<template>
  <div class="contacts">
    <div class="contacts-container">
      <div class="user-list">
        <div class="user-list-item" v-for="(group, uuid) in groups" :key="uuid" @click="enterChat(group.uuid, 'group')">
          <div class="user-item-avatar">
            <image :src="group.avatar" />
          </div>
          <div class="user-item-info">
            <span class="user-item-info__name">{{ group.name }}</span>
          </div>
        </div>
      </div>
      <view class="contacts-title" v-if="friends && friends.length !== 0">联系人</view>
      <div class="user-list">
        <div
          class="user-list-item"
          v-for="(friend, uuid) in friends"
          :key="uuid"
          @click="enterChat(friend.uuid, 'private')"
        >
          <div class="user-item-avatar">
            <image :src="friend.avatar"></image>
          </div>
          <div class="user-item-info">
            <span class="user-item-info__name">{{ friend.name }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import restApi from '../../lib/restapi';

  export default {
    name: 'Contacts',
    data() {
      return {
        friends: [],
        groups: []
      };
    },
    onShow() {
      const currentUser = uni.getStorageSync('currentUser');
      this.friends = restApi.findFriends(currentUser);
      this.groups = restApi.findGroups(currentUser);
    },
    methods: {
      enterChat(uuid, type) {
        //进入聊天页面
        const path =
          type === this.GoEasy.IM_SCENE.PRIVATE
            ? '../chat/privateChat/privateChat?to=' + uuid
            : '../chat/groupChat/groupChat?to=' + uuid;
        uni.navigateTo({
          url: path
        });
      }
    }
  };
</script>
